<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>志愿者平台</title>
    <script src="http://47.106.66.89:8080/js/vue.min.js"></script>
    <script src="http://47.106.66.89:8080/js/axios.min.js"></script>
    <link href="http://47.106.66.89:8080/js/ele-2.15.7/theme-chalk/index.css" rel="stylesheet">
    <script src="http://47.106.66.89:8080/js/ele-2.15.7/index.js"></script>
</head>
<body>
<div id="app">
    <header>
        <div class="c900 flex">
            <a href="./"><h1 style="color: #fdfdfd">志愿者平台</h1></a>
            <span class="flex">
                <a href="home.html"><el-avatar src="https://img1.baidu.com/it/u=2068393135,2936134418&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"></el-avatar></a>
                <a href="add.html">发起活动</a>
                <a href="home.html">个人中心</a>
                <a href="register.html">注册</a>
                <a href="login.html">登录</a>
            </span>
        </div>
    </header>
    <main class="c900">
        <h1 style="width: 90%;margin: 20px auto">个人中心</h1>
        <el-container style="margin: 20px auto;align-items: start">
            <el-aside class="flex" style="flex-direction: column;width: 200px">
                <el-link :underline="false">我参与的活动</el-link>
                <el-link :underline="false">我关注的活动</el-link>
                <el-link :underline="false">我评论的活动</el-link>
                <el-link :underline="false">个人信息</el-link>
                <el-link :underline="false">修改密码</el-link>
            </el-aside>
            <el-main class="grid4" style="padding-block: 0px;">
                <div class="card">
                    <a href="detail.html">
                        <img src="https://img0.baidu.com/it/u=69091635,1171280379&fm=253&fmt=auto&app=138&f=JPEG?w=1067&h=800"
                             alt="">
                    </a>
                    <span>朝阳社区搞卫生</span>
                </div>
                <div class="card">
                    <a href="detail.html">
                        <img src="https://img1.baidu.com/it/u=2433018330,266382028&fm=253&fmt=auto&app=120&f=JPEG?w=656&h=437"
                             alt="">
                    </a>
                    <span>朝阳社区慰问演出</span>
                </div>
                <div class="card">
                    <a href="detail.html">
                        <img src="https://img0.baidu.com/it/u=69091635,1171280379&fm=253&fmt=auto&app=138&f=JPEG?w=1067&h=800"
                             alt="">
                    </a>
                    <span>朝阳社区搞卫生</span>
                </div>
                <div class="card">
                    <a href="detail.html">
                        <img src="https://img0.baidu.com/it/u=4031301221,288525574&fm=253&fmt=auto&app=120&f=JPEG?w=651&h=500"
                             alt="">
                    </a>
                    <span>朝阳社区打针</span>
                </div>
                <div class="card">
                    <a href="detail.html">
                        <img src="https://img0.baidu.com/it/u=4031301221,288525574&fm=253&fmt=auto&app=120&f=JPEG?w=651&h=500"
                             alt="">
                    </a>
                    <span>朝阳社区打针</span>
                </div>
                <div class="card">
                    <a href="detail.html">
                        <img src="https://img2.baidu.com/it/u=2601151224,2520719867&fm=253&fmt=auto&app=120&f=JPEG?w=750&h=500"
                             alt="">
                    </a>
                    <span>朝阳社区指挥交通</span>
                </div>
                <div class="card">
                    <a href="detail.html">
                        <img src="https://img2.baidu.com/it/u=2601151224,2520719867&fm=253&fmt=auto&app=120&f=JPEG?w=750&h=500"
                             alt="">
                    </a>
                    <span>朝阳社区指挥交通</span>
                </div>
            </el-main>
        </el-container>
    </main>
</div>
<script>
    var v = new Vue({
        el : "#app",
        data : {},
        created() {},
        methods : {}
    })
</script>

<style>
    *{
        color:#222;
        transition: all .5s;
    }
    .card {
        margin-bottom: 20px;
        padding: 10px;
        box-shadow: 1px 1px 1px 1px #daa9a9;
        border-radius: 5px;
        font-size: .7em;
    }

    .card:hover{
        transform: scale(1.1);
        box-shadow: 3px 3px 3px 3px #daa9a9;
    }

    .card > a > img {
        width: 100%;
        height: 90px;
        object-fit: cover;
        display: block;
    }
    .el-link{
        padding-block: 20px;
        width: 100%;
    }
    .el-link:hover{
        background-color: #eee;
    }
    *{
        color:#222
    }
    html,body,#app{
        height: 100%;
    }
    body{
        margin: 0px;
        padding: 0px;
        background-size: cover;
        background-image: url("https://img.tukuppt.com/bg_grid/01/21/87/KNwCBCOQTJ.jpg%21/fh/350");
    }
    a{
        text-decoration: none;
        color: #666
    }
    img{
        width: 100%;
        object-fit: cover;
        border-radius: 5px;
    }
    .c900{
        width: 900px;
        margin-inline: auto;
    }
    .flex{
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
    }
    .grid2,.grid3,.grid4{
        grid-gap: 10px;
    }
    .grid2{
        display: grid;
        grid-gap: 10px;
        grid-template-columns: auto auto;
    }
    .grid3{
        display: grid;
        grid-template-columns: auto auto auto;
    }
    .grid4{
        display: grid;
        grid-template-columns: auto auto auto auto;
    }
    #app>header{
        background-color: #0f9ae0;
        background-size: cover;
        position: sticky;
        top: 0px;
        z-index: 9999;
        height: 60px;
    }
    #app>header h1{
        margin: 10px;
    }
    #app>header span>a{
        margin-left: 20px;
        color: #fff;
    }
    #app>main{
        background-color: #eee8;
        min-height: calc(100% - 100px);
        padding: 20px;
    }
</style>
</body>
</html>